<template>
  <el-container :style="{ backgroundColor: bgcol }">
    <el-header>
      <div class="container">
        <el-button type="success" plain @click="changeShowData">
          切换显示方式
        </el-button>
        <el-button type="success" plain class='el-icon-d-arrow-left item' @click="changeSpeed(-2)"></el-button>
        <el-button type="success" plain class='el-icon-arrow-left item' @click="changeSpeed(-1)"></el-button>
        <el-button type="success" plain class='el-icon-video-play item' v-show=!ifRotate @click="autoRotate"></el-button>
        <el-button type="success" plain class='el-icon-video-pause item' v-show=ifRotate @click="stopRotate"></el-button>
        <el-button type="success" plain class='el-icon-arrow-right item' @click="changeSpeed(1)"></el-button>
        <el-button type="success" plain class='el-icon-d-arrow-right item' @click="changeSpeed(2)"></el-button>
      </div>
      <div class="d3v">
        <div class="textSpan">
          <span class="volume-text">
            <span class="span-vertical" :style="{ color: basiccol }">基础素质综合指标为{{ getV1() }}</span>
            <span class="span-vertical" :style="{ color: corecol }">核心素质综合指标为{{ getV2() }}</span>
          </span>
        </div>
      </div>
    </el-header>
    <el-main>
      <div v-show=showType id="plotlyChart1" class="plot"></div>
      <div v-show=!showType id="plotlyChart2" class="plot"></div>
    </el-main>
    <el-footer>
      <div class="d3v">
        <div class="textSpan">
          <span class="volume-text">
            <span class="span-vertical">{{ getText(1) }}</span>
            <span class="span-vertical">{{ getText(2) }}</span>
            <span class="span-vertical">{{ getText(3) }}</span>
          </span>
        </div>
      </div>
    </el-footer>
  </el-container>
  <!-- <div :style="{ backgroundColor: bgcol }" class="full">
     <el-button type="success" plain @click="autoRotate">
      自动旋转
    </el-button>
    <el-button type="success" plain @click="stopRotate">
      停止旋转
    </el-button> -->
    <!-- <div class="container">
      <el-button type="success" plain @click="changeShowData">
        切换显示方式
      </el-button>
      <el-button type="success" plain class='el-icon-d-arrow-left item' @click="changeSpeed(-2)"></el-button>
      <el-button type="success" plain class='el-icon-arrow-left item' @click="changeSpeed(-1)"></el-button>
      <el-button type="success" plain class='el-icon-video-play item' v-show=!ifRotate @click="autoRotate"></el-button>
      <el-button type="success" plain class='el-icon-video-pause item' v-show=ifRotate @click="stopRotate"></el-button>
      <el-button type="success" plain class='el-icon-arrow-right item' @click="changeSpeed(1)"></el-button>
      <el-button type="success" plain class='el-icon-d-arrow-right item' @click="changeSpeed(2)"></el-button>
    </div>
    <div id="d3v">
      <div id="textSpan">
        <span class="volume-text">
          <span class="span-vertical" :style="{ color: basiccol }">基础素质综合指标为{{ getV1() }}</span>
          <span class="span-vertical" :style="{ color: corecol }">核心素质综合指标为{{ getV2() }}</span>
        </span>
      </div>
    </div>
    <div v-show=showType id="plotlyChart1" style="width: 100%; height: 65%; float:left"></div>
    <div v-show=!showType id="plotlyChart2" style="width: 100%; height: 65%; float:left"></div>
    <div class="element">{{ getText() }}</div>
     <div type="success" plain icon="el-icon-setting" size="mini" @click="pluginDownload">下载报告</div> -->
  <!-- </div>  -->
</template>

<script>
import D3View from './D3View'
export default D3View
</script>

<style scoped lang="less">
@import './D3View.less';
</style>
